<template>
	<view class="page-company-page" v-if="companyDetail != '{}'">
		<u-navbar title="企业主页" :title-bold="true" title-color="#000" 
		:border-bottom="false" title-size="36"></u-navbar>
		<view class="black-bg">
			<view class="company-info-wrap  u-padding-left-30 u-padding-right-30">
				<view class="company-info u-flex u-col-top">
					<view class="tag u-flex u-col-center u-row-center u-margin-right-30">
						{{companyDetail.comsname?companyDetail.comsname.slice(0,4):''}}
					</view>
					<view class="company-info-right u-flex-1">
						<view class="company-name u-margin-bottom-30">
							{{companyDetail.comname}}
						</view>
						<view class="info-desc u-margin-bottom-30 u-line-2">
							<span style="color:#a6a6a6">简介：</span>
							{{companyDetail.comdesc}}
						</view>
						<view class="info-list u-flex u-margin-bottom-30">
							<view class="u-margin-right-26">
								<u-icon name="phone" size="30" color="#b0b0b0"></u-icon>
							</view>
							<view class="">
								0371-85697931
							</view>
						</view>
						<view class="info-list u-flex u-margin-bottom-30">
							<view class="u-margin-right-26">
								<u-icon name="diannao" custom-prefix="custom-icon" size="30" color="#b0b0b0"></u-icon>
							</view>
							<view class="">
								www.artisanchn.com
							</view>
						</view>
						<view class="info-list u-flex u-margin-bottom-30">
							<view class="u-margin-right-26">
								<u-icon name="email" size="30" color="#b0b0b0"></u-icon>
							</view>
							<view class="">
								3946999722@qq.com
							</view>
						</view>
						<view class="info-list u-flex u-margin-bottom-30 u-col-top">
							<view class="u-margin-right-26">
								<u-icon name="-weizhi" custom-prefix="custom-icon" size="30" color="#b0b0b0"></u-icon>
							</view>
							<view class="u-line-2">
								{{companyDetail.comdz}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-tabs name="cate_name" count="cate_count" :list="tabList" :show-bar="false"
		font-size="30" active-color="#000" inactive-color="#666" class="tab"
		:is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="list-wrap">
			<block v-for="(item,index) in dataList">
				<leftTextRightImg :item="item" @goDeatil="goDetail"></leftTextRightImg>
				<u-line v-if="index+1 != dataList.length" color="#ebebeb"></u-line>
			</block>
		</view>
	</view>
</template>

<script>
	import { commonGet } from '@/api/commonapi.js'
	import leftTextRightImg from '@/components/common/left-text-right-img.vue'
	export default {
		components:{
			leftTextRightImg
		},
		data() {
			return {
				tabList: [{
					cate_name: '公司新闻'
				}, {
					cate_name: '三方服务'
				}, {
					cate_name: '人才招聘'
				}, {
					cate_name: '公司案例'
				}],
				current: 0,
				companyDetail:{},
				dataList:[
					{
						title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
						name:'中国匠工网',
						_createtime:'2021/12/18 11:23:21',
						img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
					},
					{
						title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
						name:'中国匠工网',
						_createtime:'2021/12/18 11:23:21',
						img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
					},
					{
						title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
						name:'中国匠工网',
						_createtime:'2021/12/18 11:23:21',
						img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
					}
				]
			}
		},
		onLoad(options) {
			this.getCompanyDetail(options.pageid,options.id)
		},
		methods: {
			change(index) {
				this.current = index;
				if(index == 0){
					this.dataList= [
						{
							title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
							name:'中国匠工网',
							_createtime:'2021/12/18 11:23:21',
							img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
						},
						{
							title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
							name:'中国匠工网',
							_createtime:'2021/12/18 11:23:21',
							img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
						},
						{
							title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
							name:'中国匠工网',
							_createtime:'2021/12/18 11:23:21',
							img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
						}
					]
				}else if(index == 1){
					this.dataList=[
						{
							title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
							name:'中国匠工网',
							_createtime:'2021/12/18 11:23:21',
							img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
						},
						{
							title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
							name:'中国匠工网',
							_createtime:'2021/12/18 11:23:21',
							img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
						}
					]
				}else if(index == 2){
					this.dataList=[
						{
							title:'11月15日起，人工、材料价格涨幅大于市场风险幅度时，可调整价差！由发包人承担！',
							name:'中国匠工网',
							_createtime:'2021/12/18 11:23:21',
							img:'/u/1006/1001-e5baaf216916b0595af33c37a71f8418.jpg'
						}
					]
				}else if(index == 3){
					this.dataList=[]
				}
			},
			getCompanyDetail(pageid,id){
				let query = {
					ak:this.$store.state.token,
					cmd:"zCompany_query_proc",
					para:JSON.stringify({
						pageid:pageid,
						id:id
					})
				}	
				commonGet(query,({Data})=>{
					console.log(Data);
					this.companyDetail = Data
				})
			},
			goDetail(){
				
			}
		}
	}
</script>

<style lang="scss">
.page-company-page{
	.black-bg{
		width: 100%;
		height: 426rpx;
		background-color: #36343c;
	}
	.company-info-wrap{
		width: 100%;
		transform: translateY(60rpx);
		.company-info{
			padding: 40rpx 30rpx;
			height: 516rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 20rpx #dadada;
			.tag{
				text-align: center;
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
				background: url(@/static/atlas/services.png) no-repeat;
				background-size: 100% 100%;
				color: #fff;
				font-size: 24rpx;
				line-height: 26rpx;
				border: 1px solid #fff;
			}
			.company-info-right{
				.company-name{
					font-size: 34rpx;
					font-weight: bold;
				}
				.info-desc{
					color: #666666;
					line-height: 34rpx;
				}
				.info-list{
					color: #666666;
					line-height: 34rpx;
				}
			}
		}
	}
	.tab{
		transform: translateY(170rpx);
	}
	.list-wrap{
		transform: translateY(170rpx);
	}
}
</style>
